<template>
  <div>
    <n-modal v-model:show="showModelC" transform-origin="center" :close-on-esc="handleClose" :mask-closable="false">
      <n-card style="width: auto" title="垦造耕地债券" :bordered="false" size="huge" role="dialog" aria-modal="true" closable
        @close="closePopup">
        <div class="cardStyle">
          <div class="echarts_one"><echartsOne></echartsOne></div>
          <div class="echarts_Two"><echartsTwo></echartsTwo></div>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useMainStore } from "../../../../store/index"

import echartsOne from './echarts/echartsOne.vue';
import echartsTwo from './echarts/echartsTwo.vue';

const store = useMainStore()
const showModelC = ref(false)
const handleClose = ref(false)

// 关闭弹窗
const closePopup = () => {
  showModelC.value = false
  store.showModelC = false
}

watch(() => store.showModelC, (newValue) => {
  showModelC.value = newValue
}, { immediate: true })
</script>

<style lang="scss" scoped>
.cardStyle {
  width: 1400px;
  height: 500px;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  .echarts_one{
    width: 800px;
    height: 400px;
    // border: 1px solid red;
  };
  .echarts_Two{
    width: 450px;
    height: 400px;
    // border: 1px solid red;
  }
}
</style>